import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Card, message, Tabs, Switch, InputNumber } from 'antd';
import { SaveOutlined, GlobalOutlined } from '@ant-design/icons';
import './UrlSettings.css';

const { TabPane } = Tabs;

const UrlSettings = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  // 模拟数据加载
  useEffect(() => {
    // 这里应该是从API获取设置数据
    const mockSettings = {
      siteUrl: 'https://www.example.com',
      siteName: '我的网站',
      siteDescription: '这是一个示例网站',
      siteKeywords: '网站,示例,管理',
      enableHttps: true,
      enableCdn: false,
      cdnUrl: '',
      seoTitle: '网站标题',
      seoDescription: '网站描述',
      seoKeywords: '关键词1,关键词2,关键词3',
      cacheTimeout: 3600,
      maxUploadSize: 10,
      enableCompression: true
    };
    form.setFieldsValue(mockSettings);
  }, [form]);

  const handleSave = async (values) => {
    setLoading(true);
    try {
      // 这里应该是调用API保存设置
      console.log('保存设置:', values);
      message.success('设置保存成功');
    } catch (error) {
      message.error('保存失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="url-settings">
      <Card 
        title={
          <span>
            <GlobalOutlined /> 网址设置
          </span>
        }
        className="settings-card"
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSave}
        >
          <Tabs defaultActiveKey="basic" type="card">
            <TabPane tab="基本设置" key="basic">
              <Form.Item
                name="siteUrl"
                label="网站地址"
                rules={[
                  { required: true, message: '请输入网站地址' },
                  { type: 'url', message: '请输入有效的URL地址' }
                ]}
              >
                <Input placeholder="https://www.example.com" />
              </Form.Item>

              <Form.Item
                name="siteName"
                label="网站名称"
                rules={[{ required: true, message: '请输入网站名称' }]}
              >
                <Input placeholder="请输入网站名称" />
              </Form.Item>

              <Form.Item
                name="siteDescription"
                label="网站描述"
              >
                <Input.TextArea rows={3} placeholder="请输入网站描述" />
              </Form.Item>

              <Form.Item
                name="siteKeywords"
                label="网站关键词"
              >
                <Input placeholder="请输入网站关键词，用逗号分隔" />
              </Form.Item>
            </TabPane>

            <TabPane tab="SEO设置" key="seo">
              <Form.Item
                name="seoTitle"
                label="SEO标题"
              >
                <Input placeholder="请输入SEO标题" />
              </Form.Item>

              <Form.Item
                name="seoDescription"
                label="SEO描述"
              >
                <Input.TextArea rows={3} placeholder="请输入SEO描述" />
              </Form.Item>

              <Form.Item
                name="seoKeywords"
                label="SEO关键词"
              >
                <Input placeholder="请输入SEO关键词，用逗号分隔" />
              </Form.Item>
            </TabPane>

            <TabPane tab="高级设置" key="advanced">
              <Form.Item
                name="enableHttps"
                label="启用HTTPS"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>

              <Form.Item
                name="enableCdn"
                label="启用CDN"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>

              <Form.Item
                name="cdnUrl"
                label="CDN地址"
                dependencies={['enableCdn']}
                rules={[
                  ({ getFieldValue }) => ({
                    validator(_, value) {
                      if (getFieldValue('enableCdn') && !value) {
                        return Promise.reject(new Error('启用CDN时必须填写CDN地址'));
                      }
                      if (getFieldValue('enableCdn') && value && !/^https?:\/\//.test(value)) {
                        return Promise.reject(new Error('请输入有效的CDN地址'));
                      }
                      return Promise.resolve();
                    },
                  }),
                ]}
              >
                <Input placeholder="https://cdn.example.com" />
              </Form.Item>

              <Form.Item
                name="cacheTimeout"
                label="缓存超时时间（秒）"
              >
                <InputNumber min={0} max={86400} style={{ width: '100%' }} />
              </Form.Item>

              <Form.Item
                name="maxUploadSize"
                label="最大上传大小（MB）"
              >
                <InputNumber min={1} max={100} style={{ width: '100%' }} />
              </Form.Item>

              <Form.Item
                name="enableCompression"
                label="启用压缩"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
            </TabPane>
          </Tabs>

          <Form.Item className="form-actions">
            <Button 
              type="primary" 
              htmlType="submit" 
              loading={loading}
              icon={<SaveOutlined />}
            >
              保存设置
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default UrlSettings;